<%@page pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<meta http-equiv="X-UA-Compatible" content="IE=11">


<c:set var="path" value="${pageContext.request.contextPath}"></c:set>

<html>
<script type="text/javascript" src="/js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="/js/layui/layui.all.js"></script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
.my_input {
	width: 45px;
	height: 45px;
	font-size: 28px;
	text-align: center;
	line-height: 45px;
	color: #c2c2c2;
}

#input {
	padding-top: 50px;
	padding-left: 180px;
}

#a, #b, #c, #d, #e, #f {
	margin: 15px;
}

#button {
	align: center;
	margin-top: 90px;
	margin-left: 310px;
	width: 330px;
	height: 120px;
}

#btn1, #btn2, #btn3, #btn4, #btn5 {
	width: 60px;
	height: 30px;
}

#btn1 {
	position: absolute;
	margin-left: 74px;
	margin-top: -30px;
}

#btn2 {
	position: absolute;
	margin-top: 53px;
	margin-left: -133px;
}

#btn5 {
	margin: 10px;
}

#btn6 {
	margin-left: 180px;
}

#btn7 {
	margin-left: 280px;
}
</style>
<body>
	<div id="input">
		<input readonly="readonly" class="my_input" id="a"> <input
			readonly="readonly" class="my_input" id="b"> <input
			readonly="readonly" class="my_input" id="c"> <input
			readonly="readonly" class="my_input" id="d"> <input
			readonly="readonly" class="my_input" id="e"> <input
			readonly="readonly" class="my_input" id="f"> <input
			type="hidden" id="value"> <input type="hidden" id="ID"
			value="${ID }">
	</div>
	<div id="button">
		<button id="btn1" class="btn btn-primary radius btn" onclick="up()">上</button>
		<button id="btn3" class="btn btn-primary radius btn" onclick="left()">左</button>
		<button id="btn5" class="btn btn-primary radius btn" onclick="clear()">清空</button>
		<button id="btn4" class="btn btn-primary radius btn" onclick="rigth()">右</button>
		<button id="btn2" class="btn btn-primary radius btn" onclick="down()">下</button>
	</div>
	<div style="margin:0 auto">
		<button class="btn btn-primary radius btn" id="btn7" style="width: 200px"
			onclick="setPassword()">设置</button>
	</div>
</body>

<script type="text/javascript">
	
	$(function(){
        var letter = ['l','r','u','d'];
        var chines = ['左','右','上','下'];
		var pwd = '${station.yaokongPwd}';
		var len = pwd.length;;
		$(".my_input").each(function (i,o) {
			 if (i<=len)
			 {
			 	var x = pwd.substring(i,i+1);
			 	var index = letter.indexOf(x);
			 	if (index>-1) {
					o.value = chines[index];
				}
			 }
		})
		
	});
	function setPassword() {
		var value = $("#value").val();

		addPassword(value);

	}

	function addPassword(value) {
		var ID = $("#ID").val();
		layer.confirm("确认设置密码吗？", function(index) {
			$.ajax({
				url : "/admin/station/saveYaokongPassword",
				data : {
					ID : ID,
					password : value
				},
				type : "post",
				dataType : "json",
				success : function(data) {
					var obj =data; // String转json对象
					if (obj.code == 200) {
						layer.msg('设置成功！', {
							icon : 6,
							time : 1000
						}, function() {
							var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
							parent.layer.close(index);
						});
					} else {
						layer.msg('设置失败！', {
							icon : 6,
							time : 1000
						});
					}
				},
				error : function() {
					layer.msg('error!', {
						icon : 1,
						time : 1000
					});
				}
			});
		});
	}

	$("#btn5").click(function() {
		$(".my_input").val("");
		$("#value").val("");
		$(".btn").removeAttr("disabled");
	})

	function disabled() {
		$("#btn").attr({
			"disabled" : "disabled"
		})
	}

	function up() {
		if ($("#a").val() == "") {
			$("#a").val("上");
		} else if ($("#b").val() == "") {
			$("#b").val("上");
		} else if ($("#c").val() == "") {
			$("#c").val("上");
		} else if ($("#d").val() == "") {
			$("#d").val("上");
		} else if ($("#e").val() == "") {
			$("#e").val("上");
		} else if ($("#f").val() == "") {
			$("#f").val("上");
		}
		var value = $("#value").val();
		if (value.length == 6) {
			disabled();
		} else {
			$("#value").val(value + "u");
		}
	}

	function down() {
		if ($("#a").val() == "") {
			$("#a").val("下");
		} else if ($("#b").val() == "") {
			$("#b").val("下");
		} else if ($("#c").val() == "") {
			$("#c").val("下");
		} else if ($("#d").val() == "") {
			$("#d").val("下");
		} else if ($("#e").val() == "") {
			$("#e").val("下");
		} else if ($("#f").val() == "") {
			$("#f").val("下");
		}
		var value = $("#value").val();
		if (value.length == 6) {
			disabled();
		} else {
			$("#value").val(value + "d");
		}
	}

	function left() {
		if ($("#a").val() == "") {
			$("#a").val("左");
		} else if ($("#b").val() == "") {
			$("#b").val("左");
		} else if ($("#c").val() == "") {
			$("#c").val("左");
		} else if ($("#d").val() == "") {
			$("#d").val("左");
		} else if ($("#e").val() == "") {
			$("#e").val("左");
		} else if ($("#f").val() == "") {
			$("#f").val("左");
		}
		var value = $("#value").val();
		if (value.length == 6) {
			disabled();
		} else {
			$("#value").val(value + "l");
		}
	}

	function rigth() {
		if ($("#a").val() == "") {
			$("#a").val("右");
		} else if ($("#b").val() == "") {
			$("#b").val("右");
		} else if ($("#c").val() == "") {
			$("#c").val("右");
		} else if ($("#d").val() == "") {
			$("#d").val("右");
		} else if ($("#e").val() == "") {
			$("#e").val("右");
		} else if ($("#f").val() == "") {
			$("#f").val("右");
		}
		var value = $("#value").val();
		if (value.length == 6) {
			disabled();
		} else {
			$("#value").val(value + "r");
		}
	}
</script>